﻿
@{
    ViewBag.Title = "ProductSearch";
    Layout = "~/Views/Shared/_Head.cshtml";
}
<script src="~/Scripts/comm.js"></script>
<script src="~/Scripts/jquery.url.js"></script>
<script>
    var TypeName = jQuery.url.param("TypeName");
    var TypeID = jQuery.url.param("TypeID");
    var ChildTypeName = jQuery.url.param("ChildTypeName");
    var ChildID = jQuery.url.param("ChildID");
    var Search = jQuery.url.param("Search");
    $(function () {
        var html = '<a href="/home/index">首页</a>';
        if (TypeName && TypeID) {
            html += '<span>&gt;</span><a href="/Product/ProductSearch?TypeName=' + TypeName + '&TypeID=' + TypeID + '">' + TypeName + '</a>';
            $('#TypeID').val(TypeID);
        }
        if (TypeName && TypeID && ChildTypeName && ChildID) {
            html += '<span>&gt;</span><a href="/Product/ProductSearch?TypeName=' + TypeName + '&TypeID=' + TypeID + 'ChildTypeName=' + ChildTypeName + '&&ChildID=' + ChildID + '">' + ChildTypeName + '</a>';
            $('#ChildID').val(ChildID);
        }
        if (Search) {
            html += '<span>&gt;</span><a href="/Product/ProductSearch?Search=' + Search + '">' + Search + '</a>';
            $('#Search').val(Search);
            //
            //console.log($('#Search').val());
        }
        $('#BreadCrumbs').html(html);
        ParamBind();
        ChildBind();
        loadlist();
    })
    ////////初始化商品分类绑定////////////
    function ParamBind() {
        $.post('/Product/ParamProductType', function (data) {
            if (data.success) {
                var html = '<dt>顶级分类：</dt>';
                //class="nows" nows 选中效果
                for (var i = 0; i < data.data.length; i++) {
                    var model = data.data[i];
                    html += "<dd><a href='javascrip:' onclick='Paramclick(this," + model.TypeID + ")'>" + model.Name + "</a></dd>";
                }
                $('#dl_ParamProductType').html(html);
               
                if (TypeName && TypeID) {
                   
                    $('#dl_ParamProductType dd').each(function () {
                        $(this).removeClass("nows");
                       
                        if ($(this).children("a").html() == TypeName) {
                            $(this).addClass("nows");
                        }
                    });
                }
            }
        })
       
        
      
    }

    function ChildBind() {
        var url = "/Product/ChildProductType";
        if (TypeName && TypeID) {
            url = "/Product/ChildProductType?ParamID=" + TypeID;
        }
        $.post(url, function (data) {
            if (data.success) {
                var html = "<dt>下级分类：</dt><dd class='nows'><a href='javascript:' onclick='ChildClick(this,0)'>全部</a></dd>";
                //class="nows" nows 选中效果
                for (var i = 0; i < data.data.length; i++) {
                    var model = data.data[i];
                    html += "<dd><a href='javascrip:' onclick='ChildClick(this," + model.TypeID + ")'>" + model.Name + "</a></dd>";
                }
                $('#dl_ChildProductType').html(html);

                if (TypeName && TypeID && ChildTypeName && ChildID) {

                    $('#dl_ChildProductType dd').each(function () {
                        $(this).removeClass("nows");
                        if ($(this).children("a").html() == ChildTypeName) {

                            $(this).addClass("nows");
                        }
                    });
                }
            }
        })
    }
    ////////初始化商品分类绑定结束////////////

    //点击分类操作//
    function Paramclick(obj, ID) {
        $('#dl_ParamProductType dd').each(function () {
            console.log(1);
            $(this).removeClass("nows");
        });
        $(obj).parent().addClass("nows");
        $('#TypeID').val(ID);
        $('#ChildID').val("");
        $.post('/Product/ChildProductType', { ParamID: ID }, function (data) {
            if (data.success) {
                var html = '<dt>下级分类：</dt><dd class="nows"><a href="javascript:" onclick="ChildClick(this)">全部</a></dd>';
                //class="nows" nows 选中效果
                for (var i = 0; i < data.data.length; i++) {
                    var model = data.data[i];
                    html += '<dd><a href="javascrip:" onclick="ChildClick(this,'+model.TypeID + ')">' + model.Name + '</a></dd>';
                }
                $('#dl_ChildProductType').html(html);
               
            }
        });
       
        loadlist();
    }
    
    function ChildClick(obj, ID) {
        $('#dl_ChildProductType dd').each(function () {
            $(this).removeClass("nows");
        })
        $(obj).parent().addClass("nows");

        $('#ChildID').val(ID);
        loadlist();
    }
    //点击分类操作//

    function loadlist() {
        var fromdata = $('#d').serializeArray();
        

        layui.use('laytpl', function () {
            var laytpl = layui.laytpl;
            $("#productPage").html("");
            $.post('/Product/ProducrWhere?Search=' + $("#Search").val() + "&pageIndex=" + pageIndex, fromdata, function (data) {
                if (data.success) {
                    totalPage = data.totalPage;
                    page();
                    var getTpl = $('#productList').html();
                    $.each(data.result, function (i, r) {
                        r.Index = i + 1;
                        laytpl(getTpl).render(r, function (html) {
                            $('#productPage').append(html);
                        });
                    })
                }
            })
        });
    }
</script>
<script type="text/template" id="productList">
    <li>
        <a href="/Product/ProductInfo?ID={{d.ProductID}}">
            <img src="{{d.Image}}"><span>{{d.Title}}</span>
            <p> {{d.Money}}</p>
        </a>
    </li>
</script>
<form id="d" style="display:none" >
    <input name="TypeID" id="TypeID" />
    <input name="ChildID" id="ChildID" />
    <input name="Search" id="Search" />
</form>
<div class="container">
    <!---->
    <div class="page" id="BreadCrumbs"></div>
    <section>
        <div class="clearfix list_d">
            <dl class="clearfix" id="dl_ParamProductType">
              
            </dl>

            <dl class="clearfix" id="dl_ChildProductType">

            </dl>
        </div>
        <ul class="clearfix indexBox indexBox_list" id="productPage">
        </ul>
        <div class="clearfix mar_tb">
            <div id="page" class="fr"></div>
        </div>
    </section>
</div>
